@use 'sass:map';

@include b(footer) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
  justify-content: space-around;
  padding: 20px;
  background-color: map.get($rd-colors, 'black');
  border-top: 1px solid var(--#{$rd-prefix}color-border);

  a {
    display: inline-flex;
    gap: 0 4px;
    align-items: center;
    font: inherit;
    color: map.get($rd-colors, 'white');
    text-decoration: none;
    transition: color var(--#{$rd-prefix}animation-duration-fast) linear;

    &:hover {
      color: var(--#{$rd-prefix}color-primary);
    }
  }

  @include e(col) {
    display: inline-flex;
    flex-direction: column;
    gap: 12px 0;
    margin-top: 40px;
  }

  @include e(col-title) {
    margin-bottom: 8px;
    font-weight: $rd-font-weight-bold;
    color: map.get($rd-colors, 'white');

    @include font-size(1.1rem);
  }

  @include e(bottom) {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 20px;
    margin-top: 40px;
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    color: rgb(155 155 159);
    white-space: pre-wrap;
    border-top: 1px solid rgb(71 71 71);
  }
}
